<template>
  <div class="home-head">
    <vua-head
      :navLists="defineVar.navLists"
      @iconClick="iconClick"
      @navClick="(name, index) => routerJump(index)"
      v-model="defineVar.activeIndex"
      navLiStyle="padding:0.8rem 1.4rem"
    >
      <template #icon>主页</template>

      <template #middle>
        <el-input
          v-model="defineVar.searchValue"
          placeholder="愣着干嘛?搜索啊!"
          class="input-with-select"
          @keyup.enter="ToSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="ToSearch"></el-button>
          </template>
        </el-input>
      </template>

      <template #right>
        <div v-if="!defineVar.isLogin" class="head__right--nologin">
          <el-button type="primary" plain @click="showLogin">登录</el-button>
          <el-button type="success" plain @click="showRegister">注册</el-button>
        </div>

        <div v-else class="head__right--login">
          <!-- <div class="news">
            <bell-filled />
          </div> -->

          <el-dropdown ref="dropdown" trigger="contextmenu" style="margin-right: 20px">
            <span class="el-dropdown-link">
              <div v-if="Isheadpic" class="headpic-skeleton"></div>
              <el-avatar
                v-else
                style="cursor: pointer"
                :size="50"
                @click="showClick"
                :src="headpicSrc"
              />
            </span>
            <template #dropdown>
              <el-dropdown-menu style="width: 150px">
                <el-dropdown-item @click="router.push('/editor')">
                  <el-icon> <edit-pen /> </el-icon>写文章
                </el-dropdown-item>
                <el-dropdown-item @click="router.push('/editor/draft')">
                  <el-icon> <management /> </el-icon>草稿箱
                </el-dropdown-item>

                <el-dropdown-item divided @click="toUser">
                  <el-icon> <user-filled /> </el-icon>我的主页
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon> <star-filled /> </el-icon>我的收藏
                </el-dropdown-item>
                <el-dropdown-item divided @click="router.push('/user/settings')">
                  <el-icon> <setting /> </el-icon>个人设置
                </el-dropdown-item>
                <el-dropdown-item divided @click="toExit">
                  <el-icon> <switch-button /> </el-icon>退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-button type="primary" @click="router.push('/editor')">写博客</el-button>
        </div>
      </template>
    </vua-head>

    <user-login v-model="loginIsShow"></user-login>

    <user-register v-model="registerIsShow"></user-register>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, toRef, reactive, watch } from 'vue'
import {
  Search,
  EditPen,
  Management,
  UserFilled,
  StarFilled,
  Setting,
  SwitchButton,
  BellFilled
} from '@element-plus/icons-vue'
import VuaHead from '/@/components/head/Head'
import router,{useRoute} from '/@/router'
import useHead, { routerJump } from '/@/hooks/useHead'

import UserLogin from '/@/views/User/components/UserLogin.vue'
import UserRegister from '/@/views/User/components/UserRegister.vue';

import { userHeadpic, userHomeAddress } from '/@/api/users/usersActive'

const route = useRoute();

let defineVar = reactive({
  searchValue: route.query.query,
  activeIndex: toRef(useHead(), 'HeadActiveIndex'),
  isLogin: ref(localStorage.getItem('token') !== null),
  navLists: [
    { name: '主页' },
    { name: '待定' },
    { name: '待定' },
    { name: '待定' },
    { name: '待定' }
  ]
})


let iconClick = () => {
  router.push('/')
  defineVar.activeIndex = 0
}

const dropdown = ref()
const showClick = () => {
  dropdown.value.handleOpen()
}

const toUser = () => {
  let userId = localStorage.getItem('userId')
  userHomeAddress(userId).then((res) => {
    router.push(`/user/${res.data}`)
  })
}

let loginIsShow = ref(false)
const showLogin = () => {
  loginIsShow.value = true
}

let registerIsShow = ref(false)
const showRegister = () => {
  registerIsShow.value = true
}

const toExit = () => {
  localStorage.clear()
  defineVar.isLogin = false
  router.push('/')
  setTimeout(() => {
    router.go(0)
  }, 100);
}

let Isheadpic = ref(true)
let headpicSrc = ref('')
onMounted(() => {
  if (defineVar.isLogin) {
    userHeadpic().then((res) => {
      if (res.data) {
        headpicSrc.value = res.data
        Isheadpic.value = false
      }
    })
  }
})

watch(route,()=>{
  defineVar.searchValue = route.query.query;
  console.log(123);
})

const ToSearch = () =>{
  if(!defineVar.searchValue){
    return false;
  }
  router.push(`/search?query=${defineVar.searchValue}`)
}
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  height: 40px;
}

.head__right--nologin {
  margin-right: 100px;
  flex-shrink: 0;
  min-width: 120px;
}

.head__right--login {
  margin-right: 120px;

  display: flex;
  align-items: center;

  .news {
    width: 24px;
    height: 24px;
    margin-right: 25px;
    color: #8a919f;
    cursor: pointer;

    &:hover {
      color: #515767;
    }
  }
}

.headpic-skeleton {
  width: 50px;
  height: 50px;

  border-radius: 50%;

  background-color: #eee;
}
</style>
